<template>
  <q-dialog>
    <MyDialog title="Status Notes">
    <q-card >

      <div
        v-for="(item, index) in status"
        :key="index"
        class="item-box fal q-pa-md"
      >
        <div class="status-box" :class="getStatusColor(item.status)"></div>
        <div>
          <hr />
        </div>
        <div>
          {{ item.label }}
        </div>
      </div>

    </q-card>
  </MyDialog>

  </q-dialog>
</template>

<script setup lang="ts">
import { getStatusColor } from 'src/utils/getPublic';
import MyDialog from './container/MyDialog.vue';

const status = [
  { label: 'Missing Parts', status: 'missing' },
  { label: 'Fail / incomplete', status: 'fail' },
  { label: 'Force Complete', status: 'warning' },
  { label: 'Pass / Complete', status: 'pass' },
  { label: 'No status/ Checked In', status: 'no-status' },
];
</script>

<style scoped>
.box {
  width: 70px;
  height: 30px;
}
hr {
  width: 30px;
  margin-left: 5px;
  margin-right: 5px;
  background-color: black;
}
.item-box {
  display: flex;
}


</style>
